<template>
    <div
        class="contactList"
        v-loading="tableLoading"
        element-loading-background="rgba(255, 255, 255, 0.7)"
    >
        <!-- 联系人信息 -->
        <el-card class="box-card">
            <div slot="headerss" class="clearfix">
                <span>联系人信息</span>
            </div>
            <div class="container">
                <el-table :data="contactData" stripe border class="heard-bg business_table">
                    <el-table-column
                        v-for="(item, index) in contactTableColumn"
                        :key="index"
                        :label="item.label"
                    >
                        <template slot-scope="scope">
                            <span>{{ scope.row[item.value] }}</span>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="footer">
                    <el-button
                        type="primary"
                        size="small"
                        @click="handleGetContactData('pre')"
                        :disabled="curContactIndex <= 0"
                    >上一页</el-button>
                    <el-button
                        type="primary"
                        size="small"
                        @click="handleGetContactData('next')"
                        :disabled="!contactNextButton"
                    >下一页</el-button>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
    name: 'contactList',
    data() {
        return {
            tableLoading: false, // 表格loading
            contactData: [], // 联系人信息列表数据
            lastContactList: [], // 联系人信息每页最后一条记录的翻页字段
            curContactIndex: [], // 联系人信息列表 -- 当前页最后一条记录的申请编号的索引
            contactNextButton: false, // 联系人信息 ‘下一页’ 翻页按钮
            contactTableColumn: [
                {
                    label: '联系人姓名',
                    value: 'NAME1'
                },
                {
                    label: '联系人手机号',
                    value: 'MOBILE1'
                }
            ], // 联系人信息表格 展示项
        }
    },

    // 取缓存信息
    computed: mapState({
        3004: state => state.common.cardInfo_3004, // 默认卡信息
        defaultParams: state => state.common.defaultParams, // 接口默认参数
        pinFlag: state => state.common.pinFlag // 是否密码检查标志 
    }),

    mounted() {
        this.getcontactInfo()
    },

    methods: {

        // 获取联系人信息
        getcontactInfo() {
            this.tableLoading = true
            const appBody = {
                CARDNBR: this[3004].CARDNO || '', // 卡号
                INQOPT: '1', // 查询方式 1-卡号查询  2-证件号查询
                PINFLAG: this.pinFlag, // 是否检查密码标志 
                RTNIND: this.lastContactList.length === 0 ? '' : 1, // 首次上传 空
                NAME: this.lastContactList.length === 0 ? '' : this.lastContactList[this.curContactIndex].NAME1, // 首次查询上送空；下翻页查询时上送最后一条记录中的“联系人姓名”；
                TEL: this.lastContactList.length === 0 ? '' : this.lastContactList[this.curContactIndex].TEL1, // 首次查询上送空；下翻页查询时上送最后一条记录中的“联系人电话”；
                MOBILE: this.lastContactList.length === 0 ? '' : this.lastContactList[this.curContactIndex].MOBILE1 // 首次查询上送空；下翻页查询时上送最后一条记录中的“联系人手机号”；

            }
            const defaultParams = JSON.parse(JSON.stringify(this.defaultParams))
            defaultParams.body.appHead.tranCode = '3064'
            defaultParams.body.appBody = appBody

            // 跑 3064 交易
            this.$post.common.transPort(defaultParams).then(res => {
                this.tableLoading = false
                if (res.status === 200) {
                    let result = JSON.parse(res.data.jsonRes)
                    console.log(result, '响应数据 -- 3064')
                    if (result.sysHead.rspCd === '000000') { // 判断交易是否成功
                        this.contactData = result.body.appBody.dataList || []
                        // 判断此次查询数据最后一条记录申请编号是否在已有列表中  没有- 添加
                        const currentData = result.body.appBody.dataList[result.body.appBody.dataList.length - 1]
                        this.contactNextButton = result.body.appBody.dataList.length < 10 ? false : true
                        let flag = false
                        this.lastContactList.forEach(item => {
                            if (item.MOBILE1 === currentData.MOBILE1) {
                                falg = true
                            }
                        })
                        if (flag) { // 存在
                            this.lastContactList.forEach((item, index) => {
                                if (item.MOBILE1 === currentData.MOBILE1) {
                                    this.curContactIndex = index
                                    return
                                }
                            })
                        } else { // 不存在
                            this.lastContactList.push({
                                NAME1: currentData.NAME1,
                                TEL1: currentData.TEL1,
                                MOBILE1: currentData.MOBILE1
                            })
                            this.curContactIndex = this.lastContactList.length - 1
                        }
                    } else {
                        const errorMsg = '错误代码：' + result.sysHead.rspCd + ', 错误信息：' + result.sysHead.rspMsg
                        this.$alert(errorMsg, result.sysHead.rspDesc, {
                            customClass: 'error'
                        })
                    }
                } else {
                    this.tableLoading = false
                    this.$alert('请求失败!', '提示', {
                        customClass: 'error'
                    })
                }

            })
        },

        // 联系人信息 页码切换
        handleGetContactData(type) {
            if (type === 'pre') { // 切换到上一页
                if (this.curContactIndex - 2 < 0) {
                    this.lastContactList = [] // 清空缓存 申请编号 -> 相当于首次查询
                } else {
                    this.curContactIndex = this.curContactIndex - 2
                }
                this.getcontactInfo()
            } else { // 切换到下一页    
                this.getcontactInfo()
            }
        }
    }
}
</script>

<style lang="scss" scoped>
</style>